<template>
  <el-card>
    <el-form class="flex justify-between" :inline="true" label-width="100px">
      <div>
        <el-form-item label="充值时间：">
          <el-date-picker
            v-model="formOption.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            valueFormat="yyyy-MM-dd"
            style="width: 300px"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="客户名称：">
          <ScrollSelect
            placeholder="请选择用户信息"
            :selected-value="formOption.gainUserId"
            :get-list-methods="getListMethods"
            :get-list-format="getListFormat"
            :clearable="true"
            search-key="nickNameOrMobile"
            @selectedChange="selectedChange"
          />
        </el-form-item>
      </div>

      <el-form-item class="text-right">
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button @click="exportFile">导出</el-button>
      </el-form-item>
    </el-form>

    <PageTable
      :loading="loading"
      :data="dataSource"
      :columns="columns"
      :options="options"
      @selectChange="selectChange"
    />

    <Pagination
      v-show="total > 0"
      :total="total"
      :pageNo.sync="listQuery.pageNo"
      :pageSize.sync="listQuery.pageSize"
      @pagination="getGiveList"
    />
  </el-card>
</template>

<script>
import { export2Excel } from '@/utils/export'
import { GIFT_WAY, GIFT_ACCOUNT_STATUS, GIFT_ACCOUNT_STATUS_COLOR } from '@/enum/user'
export default {
  name: 'CompanyInfoGiveLog',
  data() {
    return {
      // 表单搜索配置
      formOption: {
        time: '',
        gainUserId: ''
      },
      getListMethods: params => {
        return this.getUserSelectList(params)
      },
      getListFormat: (list = []) => {
        // 下拉框数据格式
        return list.map(({ nickName, mobile, id }) => ({
          label: `${nickName} ${mobile}`,
          value: id
        }))
      },
      // 表单按钮列表
      btnList: [
        {
          type: 'primary',
          label: '搜索',
          onClick: () => {
            this.listQuery.pageNo = 1
            this.getGiveList()
          }
        },
        {
          label: '导出',
          onClick: () => {
            this.exportFile()
          }
        }
      ],

      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0,

      // 表格加载
      loading: true,
      // 表格配置
      options: {
        border: true,
        select: true
      },
      // 表格列配置
      columns: [
        {
          label: '赠送积分',
          prop: 'giftIntegral',
          render: (h, { row }) => {
            return <div>{row.giftIntegral}积分</div>
          }
        },
        {
          label: '支付方式',
          prop: 'giftWay',
          render: (h, { row }) => {
            return <div>{GIFT_WAY[row.giftWay]}</div>
          }
        },
        {
          label: '到账状态',
          prop: 'status',
          render: (h, { row }) => {
            return (
              <div style={`color:${GIFT_ACCOUNT_STATUS_COLOR[row.status]}`}>
                {GIFT_ACCOUNT_STATUS[row.status]}
              </div>
            )
          }
        },
        { prop: 'createdTime', label: '赠送时间' },
        {
          label: '赠送客户',
          prop: 'gainUserName',
          render: (h, { row }) => {
            return (
              <div>
                {row.gainUserMobile ? (
                  <div class="flex justify-center align-start">
                    <el-image style="width: 40px; height: 40px" src={row.gainUserPhoto}></el-image>
                    <div class="flex flex-col align-start ml-5">
                      <p>{row.gainUserName}</p>
                      <p>{row.gainUserMobile}</p>
                    </div>
                  </div>
                ) : (
                  '暂无'
                )}
              </div>
            )
          }
        },
        {
          label: '赠送备注',
          prop: 'giftContent',
          render: (h, { row }) => {
            return <div>{row.giftContent || '暂无'}</div>
          }
        }
      ],
      // 表格源数据
      dataSource: [],
      // 选中列表数据
      selectList: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getGiveList()
  },
  methods: {
    // 获取用户信息
    async getUserSelectList(params) {
      const {
        data: { records }
      } = await this.$http.user.user.getUserSelectList({ params })
      return records
    },
    // 监听选择用户信息
    selectedChange(id) {
      this.formOption.gainUserId = id
    },
    // 获取赠送记录列表
    async getGiveList() {
      try {
        const pramas = {
          ...this.listQuery,
          etpId: this.$route.query.id,
          gainUserId: this.formOption.gainUserId,
          startDate: this.formOption.time?.[0] ?? '',
          endDate: this.formOption.time?.[1] ?? ''
        }
        const {
          data: { records, total }
        } = await this.$http.finance.gift.page(pramas)
        this.dataSource = records
        this.total = total
        this.loading = false
      } catch (error) {
        console.log('getGiveList', error)
      }
    },

    /**
     * 勾选列表行数据
     * @parma {Array} rows 选中行
     */
    selectChange(rows) {
      this.selectList = rows
    },

    // 筛选
    search() {
      this.listQuery.pageNo = 1
      this.getGiveList()
    },

    // 点击导出
    exportFile() {
      if (!this.selectList.length) return this.$message.error('请选择要导出的数据')
      // 表头设置
      const headerData = this.columns.filter(item => item.prop).map(item => item.label)
      headerData.splice(5, 0, '手机号')
      // console.log(headerData)
      // 表格数据字段
      const filterData = this.columns.filter(item => item.prop).map(item => item.prop)
      filterData.splice(5, 0, 'gainUserMobile')
      // console.log(filterData)
      // 表格数据
      const tableData = this.selectList.map(item => {
        return {
          ...item,
          giftWay: GIFT_WAY[item.giftWay],
          status: GIFT_ACCOUNT_STATUS[item.status],
          gainUserName: item.gainUserName || '暂无',
          gainUserMobile: item.gainUserMobile || '暂无',
          giftContent: item.giftContent || '暂无'
        }
      })
      export2Excel(headerData, tableData, filterData, '会员列表', () => {
        this.$message.success('导出成功')
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
